<template>
  <div
    style="display: flex; align-content: center; width: 1200px; margin: auto"
    class="headerContent"
  >
    <div
      style="
        display: flex;
        align-content: center;
        justify-content: space-between;
        width: 100%;
      "
    >
      <div style="display: flex; align-content: center">
        <div
          style="
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
          "
        >
          <div
            style="display: flex; justify-content: center; align-items: center"
          >
            <img
              src="../assets/logo.png"
              style="height: 20px; width: 20px; margin-right: 10px"
            />
            亿品悦动 | 独家精选爆品
          </div>
        </div>
        <div style="padding-top: 0px" v-if="userInfo.nickname">
          <span style="padding-left: 25px; color: #409eff">{{
            userInfo.nickname
          }}</span>
          <el-dropdown trigger="click">
            <el-button style="font-size: 10px" type="text" size="medium">
              <i class="el-icon-arrow-down" style="margin-left: 15px"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <!-- <el-dropdown-item>个人中心</el-dropdown-item> -->
              <!-- <el-dropdown-item>修改手机号</el-dropdown-item> -->
              <el-dropdown-item @click.native="changePassword"
                >修改密码</el-dropdown-item
              >
              <el-dropdown-item @click.native="quit">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div v-else style="padding-left: 25px">
          <router-link
            :to="{ name: 'login' }"
            style="color: #888; text-decoration: none"
            >登录</router-link
          >
          <!-- <router-link
            :to="{ name: 'login' }"
            style="color: #888; text-decoration: none; padding-left: 10px"
            >注册</router-link
          > -->
        </div>
      </div>
      <div
        style="
          display: flex;
          heigth: 100%;
          align-content: center;
          padding-top: 0px;
          gap: 20px;
        "
        class="hand-cursor"
      >
        <div
          v-if="userInfo.invitation_status === 1"
          @click="YQXYHDialogVisible = true"
        >
          邀请新用户拿提成
        </div>
        <!-- <div>手机版</div> -->
        <div v-if="userInfo.invitation_status === 1" @click="getYQMX">
          邀请明细
        </div>
        <div @click="getDDMX">订单明细</div>
        <div @click="getWithdrawal">提现</div>
      </div>
    </div>

    <!-- 重置密码 -->
    <el-dialog
      :title="'修改 ' + userInfo.nickname + ' 登录密码'"
      :visible.sync="editDialogVisible"
      width="600px"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <div style="width: 100%; height: 100%; background-color: #ffffff">
        <div style="margin-right: 40px">
          <el-form
            ref="form"
            :model="form"
            :rules="mainFormRules"
            :label-width="formLabelWidth"
            size="medium"
          >
            <el-form-item label="新密码:" prop="password">
              <el-input v-model="form.password" placeholder="请输入新密码" />
            </el-form-item>
            <el-form-item label="重复密码:" prop="surePass">
              <el-input
                v-model="form.surePass"
                placeholder="请重复输入新密码"
              />
            </el-form-item>
            <el-form-item label="手机号:">
              {{ userInfo.mobile }}
              <el-button
                @click.prevent="removeDomain('bindingPhone')"
                type="primary"
                plain
                :disabled="disableCode"
                class="get-code-btn"
              >
                {{ buttonName }}
              </el-button>
            </el-form-item>
            <el-form-item label="验证码:" prop="code">
              <el-col :span="8">
                <el-input v-model="form.code" placeholder="请输入验证码" />
              </el-col>
            </el-form-item>
          </el-form>
        </div>
        <div
          style="display: flex; align-items: center; justify-content: center"
        >
          <el-button :loading="loading" type="primary" @click="resetPass()"
            >提交</el-button
          >
          <el-button @click="cannelPass">取 消</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 邀请明细 -->
    <el-dialog
      title="邀请明细"
      :visible.sync="YQMXDialogVisible"
      width="900px"
      center
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <div style="width: 100%; height: 100%; background-color: #ffffff">
        <div class="">
          <header class="header_nav">
            <el-form
              class="demo-form-inline"
              :model="searchInfoYQMX"
              label-width="68px"
            >
              <el-row>
                <el-col :span="6">
                  <el-form-item label="邀请时间">
                    <el-date-picker
                      size="small"
                      style="width: 140px"
                      v-model="searchInfoYQMX.created_at"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      type="datetimerange"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :default-time="['00:00:00', '23:59:59']"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="6"
                  ><el-form-item label="昵称" class="tiny">
                    <el-input
                      size="small"
                      style="width: 140px"
                      v-model="searchInfoYQMX.nickname"
                      placeholder="请输入昵称"
                    ></el-input> </el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="手机号" class="tiny">
                    <el-input
                      size="small"
                      style="width: 140px"
                      v-model="searchInfoYQMX.mobile"
                      placeholder="请输入手机号"
                    ></el-input> </el-form-item
                ></el-col>
                <el-col :span="6">
                  <el-form-item style="text-align: center">
                    <el-button size="small" @click="emptyYQMX">重置</el-button>
                    <el-button size="small" type="primary" @click="searchYQMX"
                      >查询</el-button
                    >
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </header>
        </div>
        <el-table
          :data="YQMXDList.list"
          stripe
          style="width: 100%"
          height="300"
          :header-cell-style="headClass"
          v-loading="YQMXDtableLoading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
        >
          <el-table-column
            prop="nickname"
            label="昵称"
            align="center"
            :show-overflow-tooltip="true"
            :formatter="changeNull"
          >
          </el-table-column>
          <el-table-column
            prop="mobile"
            label="手机号"
            align="center"
            :show-overflow-tooltip="true"
            :formatter="changeNull"
          >
          </el-table-column>
          <el-table-column
            prop="created_at"
            label="注册时间"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
        </el-table>
        <div style="text-align: right; margin-top: 10px">
          <el-pagination
            background
            layout="total, prev, pager, next"
            :total="YQMXDList.total"
            @current-change="handleCurrentChange"
            :current-page.sync="searchInfoYQMX.page"
          >
          </el-pagination>
        </div>
      </div>
    </el-dialog>

    <!-- 邀请新用户拿提成 -->
    <el-dialog
      title="邀请新用户拿提成"
      :visible.sync="YQXYHDialogVisible"
      width="900px"
      center
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <div>
        <div style="display: flex">
          <div style="text-align: center; margin-right: 50px" class="itemLabel">
            <p>通过链接邀请</p>
            <p>（适合电脑注册）</p>
          </div>
          <div>
            <p>
              <span style="margin-right: 20px">{{ shareInfo.share_url }}</span>
              <el-button type="primary" @click="copyLink" size="mini" plain
                >复制</el-button
              >
            </p>
            <p style="color: #c7aa8d">
              （注意：不要修改或删除任何字符，否则邀请失败）
            </p>
          </div>
        </div>

        <div style="display: flex; margin: 30px 0">
          <div style="text-align: center; margin-right: 50px" class="itemLabel">
            <p>通过公众号海报邀请</p>
            <p>（适合手机注册）</p>
          </div>
          <div style="display: flex; align-items: center">
            <div>
              <img
                :src="shareInfo.poster"
                alt=""
                srcset=""
                style="width: 100px; height: auto; margin-right: 20px"
              />
            </div>
            <div style="height: 20px">
              <el-button
                type="primary"
                @click="downloadImg(shareInfo.poster, '海报')"
                size="mini"
                plain
                >下载海报</el-button
              >
            </div>
          </div>
        </div>

        <div style="display: flex">
          <div style="margin-bottom: 20px" class="itemLabel">奖励规则</div>
          <div
            style="padding: 10px; width: 500px; min-height: 50px"
            class="rulesBox"
          >
            {{ shareInfo.rules_desc }}
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 订单明细 -->
    <el-dialog
      title="订单明细"
      :visible.sync="DDMXDialogVisible"
      width="900px"
      center
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <div>
        <div class="">
          <header class="header_nav">
            <el-form
              class="demo-form-inline"
              :model="searchInfoDDMX"
              label-width="68px"
            >
              <el-row v-if="isEstimate == 0">
                <el-col :span="6" v-if="userInfo.invitation_status === 1">
                  <el-form-item label="昵称">
                    <el-input
                      size="small"
                      style="width: 140px"
                      v-model="searchInfoDDMX.nickname"
                      placeholder="请输入昵称"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" v-if="userInfo.invitation_status === 1">
                  <el-form-item label="手机号" class="tiny">
                    <el-input
                      size="small"
                      style="width: 140px"
                      v-model="searchInfoDDMX.mobile"
                      placeholder="请输入手机号"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="订单号" class="tiny">
                    <el-input
                      size="small"
                      style="width: 140px"
                      v-model="searchInfoDDMX.order_id"
                      placeholder="请输入订单号"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="商品ID" class="tiny">
                    <el-input
                      size="small"
                      style="width: 140px"
                      v-model="searchInfoDDMX.product_id"
                      placeholder="请输入商品ID"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="订单状态">
                    <el-select
                      size="small"
                      style="width: 140px"
                      v-model="searchInfoDDMX.status"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="(item, index) in statusOption"
                        :key="item"
                        :label="item"
                        :value="index + 1"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="结算状态">
                    <el-select
                      size="small"
                      style="width: 140px"
                      v-model="searchInfoDDMX.is_settlement"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in settlementOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="下单时间">
                    <el-date-picker
                      size="small"
                      style="width: 140px"
                      v-model="searchInfoDDMX.pay_at"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      type="datetimerange"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :default-time="['00:00:00', '23:59:59']"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="结算时间">
                    <el-date-picker
                      size="small"
                      style="width: 140px"
                      v-model="searchInfoDDMX.settlement_time"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      type="datetimerange"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :default-time="['00:00:00', '23:59:59']"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-else-if="isEstimate == 1">
                <el-col :span="8">
                  <el-form-item
                    label="商品名称"
                    class="tiny"
                    label-width="90px"
                  >
                    <el-input
                      size="small"
                      style="width: 200px"
                      v-model="searchInfoDDMX.product_title"
                      placeholder="请输入商品名称"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="商品ID" class="tiny">
                    <el-input
                      size="small"
                      style="width: 140px"
                      v-model="searchInfoDDMX.product_id"
                      placeholder="请输入商品ID"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="日期">
                    <el-date-picker
                      size="small"
                      style="width: 140px"
                      v-model="searchInfoDDMX.order_date"
                      value-format="yyyy-MM-dd"
                      type="daterange"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :default-time="['00:00:00']"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-else-if="isEstimate == 2">
                <el-col :span="8">
                  <el-form-item
                    label="商品名称"
                    class="tiny"
                    label-width="90px"
                  >
                    <el-input
                      size="small"
                      style="width: 200px"
                      v-model="searchInfoDDMX.itemName"
                      placeholder="请输入商品名称"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="商品ID" class="tiny">
                    <el-input
                      size="small"
                      style="width: 140px"
                      v-model="searchInfoDDMX.itemId"
                      placeholder="请输入商品ID"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="日期">
                    <el-date-picker
                      size="small"
                      style="width: 140px"
                      v-model="searchInfoDDMX.orderDate"
                      value-format="yyyyMMdd"
                      key="picker_key01"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item style="text-align: center">
                <el-button @click="emptyDDMX">重置</el-button>
                <el-button type="primary" @click="searchDDMX">查询</el-button>
              </el-form-item>
            </el-form>
          </header>
        </div>
        <el-tabs
          v-model="DDMXActiveName"
          type="card"
          @tab-click="DDMXTabsHandleClick"
        >
          <el-tab-pane label="直播间预估收益" name="estimate"> </el-tab-pane>
          <el-tab-pane label="百补秒杀预估收益" name="seeMain"> </el-tab-pane>
          <el-tab-pane label="直播间订单明细" name="share"> </el-tab-pane>
          <el-tab-pane
            v-if="userInfo.invitation_status === 1"
            label="邀请用户提成"
            name="commission"
          >
          </el-tab-pane>
        </el-tabs>
        <el-table
          :data="DDMXList.list"
          stripe
          style="width: 100%"
          height="300"
          :header-cell-style="headClass"
          v-loading="DDMXtableLoading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          v-show="isEstimate == 0"
        >
          <el-table-column
            prop="username"
            label="商品信息"
            align="center"
            width="450"
          >
            <template slot-scope="scope">
              <div class="goodsItem">
                <img :src="scope.row.product_picture" alt="" />
                <div class="goodsInfo">
                  <div>商品标题：{{ scope.row.product_title }}</div>
                  <div>订单号：{{ scope.row.order_id }}</div>
                  <div>下单时间：{{ scope.row.pay_at }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="order_amount"
            label="付款金额"
            align="center"
            :show-overflow-tooltip="true"
            :formatter="changeNull"
          >
            <template slot-scope="scope">
              ￥{{ scope.row.order_amount }}
            </template>
          </el-table-column>
          <el-table-column
            prop="predict_amount"
            label="补贴金额"
            align="center"
            :show-overflow-tooltip="true"
            :formatter="changeNull"
          >
            <template slot-scope="scope">
              ￥{{ scope.row.products.subsidy_amount }}
            </template>
          </el-table-column> -->
          <el-table-column prop="isEnable" label="订单状态" align="center">
            <template slot-scope="scope">
              <p>
                {{ scope.row.status | statusFilter }}
              </p>
            </template>
          </el-table-column>
          <el-table-column prop="isEnable" label="结算状态" align="center">
            <template slot-scope="scope">
              <p>
                {{ scope.row.is_settlement | settlementFilter }}
              </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="end_time"
            label="结算时间"
            align="center"
            :show-overflow-tooltip="true"
            width="170"
          >
            <template slot-scope="scope">
              <p>
                {{ scope.row.end_time || "-" }}
              </p>
            </template>
          </el-table-column>
        </el-table>

        <el-table
          :data="summaryList.list"
          stripe
          style="width: 100%"
          height="300"
          :header-cell-style="headClass"
          v-loading="DDMXtableLoading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          v-show="isEstimate == 1"
        >
          <el-table-column
            prop="username"
            label="商品信息"
            align="center"
            width="450"
          >
            <template slot-scope="scope">
              <div class="goodsItem">
                <img :src="scope.row.product_picture" alt="" />
                <div class="goodsInfo">
                  <div>产品标题：{{ scope.row.product_title }}</div>
                  <div>产品ID：{{ scope.row.product_id }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="order_date"
            label="订单日期"
            align="center"
            :show-overflow-tooltip="true"
            width="170"
          >
            <template slot-scope="scope">
              <p>
                {{ scope.row.order_date }}
              </p>
            </template>
          </el-table-column>
          <el-table-column prop="isEnable" label="订单总数" align="center">
            <template slot-scope="scope">
              <p>
                {{ scope.row.total_orders }}
              </p>
            </template>
          </el-table-column>
          <el-table-column prop="isEnable" label="预估补贴金额" align="center">
            <template slot-scope="scope">
              <p>
                {{ scope.row.total_amount || 0 }}
              </p>
            </template>
          </el-table-column>
        </el-table>

        <el-table
          :data="orderList.list"
          stripe
          style="width: 100%"
          height="300"
          :header-cell-style="headClass"
          v-loading="DDMXtableLoading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          v-show="isEstimate == 2"
        >
          <el-table-column
            prop="username"
            label="商品信息"
            align="center"
            width="450"
          >
            <template slot-scope="scope">
              <div class="goodsItem">
                <img :src="scope.row.goods.mainImg" alt="" />
                <div class="goodsInfo">
                  <div>产品标题：{{ scope.row.goods.itemName }}</div>
                  <div>产品ID：{{ scope.row.goods.itemId }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="orderDate"
            label="订单日期"
            align="center"
            :show-overflow-tooltip="true"
            width="170"
          >
            <template slot-scope="scope">
              <p>
                {{ scope.row.orderDate }}
              </p>
            </template>
          </el-table-column>
          <el-table-column prop="buyUV" label="订单总数" align="center">
            <template slot-scope="scope">
              <p>
                {{ scope.row.buyUV }}
              </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="total_subsidy_amount"
            label="预估补贴金额"
            align="center"
          >
            <template slot-scope="scope">
              <p>
                {{ scope.row.total_subsidy_amount }}
              </p>
            </template>
          </el-table-column>
        </el-table>

        <div style="text-align: right; margin-top: 10px" v-if="isEstimate == 0">
          <el-pagination
            background
            layout="total, prev, pager, next"
            :total="DDMXList.total"
            @current-change="handleDDMXCurrentChange"
            :current-page.sync="searchInfoDDMX.page"
            :page-size="searchInfoDDMX.limit"
          >
          </el-pagination>
        </div>
        <div
          style="text-align: right; margin-top: 10px"
          v-else-if="isEstimate == 1"
        >
          <el-pagination
            background
            layout="total, prev, pager, next"
            :total="summaryList.total"
            @current-change="handleSummaryurrentChange"
            :current-page.sync="searchInfoDDMX.page"
            :page-size="searchInfoDDMX.limit"
          >
          </el-pagination>
        </div>

        <div
          style="text-align: right; margin-top: 10px"
          v-else-if="isEstimate == 2"
        >
          <el-pagination
            background
            layout="total, prev, pager, next"
            :total="orderList.total"
            @current-change="handleSummaryurrentChange"
            :current-page.sync="searchInfoDDMX.page"
            :page-size="searchInfoDDMX.limit"
          >
          </el-pagination>
        </div>
      </div>
    </el-dialog>

    <!-- 提现 -->
    <el-dialog
      title="提现"
      :visible.sync="TXDialogVisible"
      width="900px"
      center
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <div>
        <el-tabs
          v-model="TXActiveName"
          type="card"
          @tab-click="TXTabsHandleClick"
        >
          <el-tab-pane label="申请提现" name="first">
            <div
              style="display: flex; justify-content: space-between"
              class="boldFont"
            >
              <div
                style="
                  background-color: #f4f4f5;
                  padding: 10px 20px;
                  display: flex;
                  align-content: center;
                  justify-content: center;
                "
              >
                可提现：{{ withdrawalInfo.account_balance || 0 }} 元
              </div>
              <div
                style="
                  background-color: #f4f4f5;
                  padding: 10px 20px;
                  display: flex;
                  align-content: center;
                  justify-content: center;
                "
              >
                已提现：{{ withdrawalInfo.total_withdrawal_amount || 0 }} 元
              </div>
              <div
                style="
                  background-color: #f4f4f5;
                  padding: 10px 20px;
                  display: flex;
                  align-content: center;
                  justify-content: center;
                "
              >
                待结算：{{ withdrawalInfo.pending_settlement_amount || 0 }} 元
              </div>
              <div
                style="
                  background-color: #f4f4f5;
                  padding: 10px 20px;
                  display: flex;
                  align-content: center;
                  justify-content: center;
                "
              >
                累计结算：{{ withdrawalInfo.total_settlement_amount || 0 }} 元
              </div>
            </div>
            <div style="display: flex; align-items: center; margin-top: 30px">
              <div>支付宝账号：{{ withdrawalInfo.alipay_account }}</div>
              <div style="margin: 0 40px">
                支付宝姓名：{{ withdrawalInfo.alipay_name }}
              </div>
              <el-button
                type="primary"
                @click="XGZFBDialogVisible = true"
                size="mini"
                plain
                >修改支付宝</el-button
              >
            </div>
            <div>
              <el-form
                :inline="false"
                class="demo-form-inline"
                style="margin: 20px 0"
              >
                <el-form-item label="输入提现金额" class="tiny">
                  <el-input-number
                    :min="Number(withdrawalInfo.min_withdrawal_amount)"
                    :max="Number(withdrawalInfo.account_balance)"
                    :controls="false"
                    :precision="2"
                    style="width: 200px"
                    v-model="TXamount"
                    placeholder="请输入提现金额"
                  ></el-input-number>
                  <span style="margin-left: 20px"
                    >最低提现金额￥{{
                      withdrawalInfo.min_withdrawal_amount
                    }}</span
                  >
                </el-form-item>
                <div
                  class="drawal-msg"
                  style="margin-bottom: 20px"
                  v-show="
                    withdrawalInfo.withdrawal_tips &&
                    withdrawalInfo.withdrawal_tips != ''
                  "
                >
                  <el-alert
                    :title="withdrawalInfo.withdrawal_tips"
                    type="warning"
                    :closable="false"
                  >
                  </el-alert>
                </div>
                <div style="text-align: center">
                  <el-form-item>
                    <template>
                      <el-button @click="TXDialogVisible = false"
                        >取消</el-button
                      >
                      <el-button type="primary" @click="confirmWithdrawal()"
                        >确认提现</el-button
                      >
                    </template>
                  </el-form-item>
                </div>
              </el-form>
              <div></div>
            </div>
          </el-tab-pane>

          <el-tab-pane label="提现记录" name="second">
            <div>
              <el-table
                :data="TXJLList.list"
                stripe
                style="width: 100%"
                height="300"
                :header-cell-style="headClass"
                v-loading="TXJLtableLoading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
              >
                <el-table-column
                  prop="created_at"
                  label="申请时间"
                  align="center"
                  :show-overflow-tooltip="true"
                  :formatter="changeNull"
                >
                </el-table-column>
                <el-table-column
                  prop="account_number"
                  label="支付宝账号"
                  align="center"
                  :show-overflow-tooltip="true"
                  :formatter="changeNull"
                >
                </el-table-column>
                <el-table-column
                  prop="withdrawal_amount"
                  label="申请金额"
                  align="center"
                  :show-overflow-tooltip="true"
                  :formatter="changeNull"
                >
                </el-table-column>
                <el-table-column
                  prop="handle_fee"
                  label="手续费"
                  align="center"
                  :show-overflow-tooltip="true"
                  :formatter="changeNull"
                >
                </el-table-column>
                <el-table-column
                  prop="actual_amount"
                  label="实际到账"
                  align="center"
                  :show-overflow-tooltip="true"
                  :formatter="changeNull"
                >
                </el-table-column>
                <el-table-column
                  prop="status"
                  label="状态"
                  align="center"
                  :show-overflow-tooltip="true"
                >
                  <template slot-scope="scope">
                    <p>
                      {{ scope.row.status | withdrawalFilter }}
                    </p>
                  </template>
                </el-table-column>
              </el-table>
              <div style="text-align: right; margin-top: 10px">
                <el-pagination
                  background
                  layout="total, prev, pager, next"
                  :total="TXJLList.total"
                  @current-change="handleCurrentChangeTXJL"
                  :current-page.sync="searchInfoTXJL.page"
                >
                </el-pagination>
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane label="余额明细" name="third">
            <el-row style="margin: 10px 0 20px 0" type="flex" align="middle">
              <el-col :span="2">类型：</el-col>
              <el-col :span="6">
                <el-select
                  v-model="balanceQuery.type"
                  placeholder="请选择"
                  size="mini"
                  @change="getBalanceList"
                >
                  <el-option label="全部" :value="null"> </el-option>
                  <el-option label="收入" :value="1"> </el-option>
                  <el-option label="支出" :value="2"> </el-option>
                </el-select>
              </el-col>
            </el-row>

            <el-table
              :data="balanceList"
              border
              fit
              highlight-current-row
              style="width: 100%"
            >
              <el-table-column
                label="类型"
                prop="change_type"
                align="center"
                show-overflow-tooltip
                width="100"
              >
                <template slot-scope="{ row }">
                  <span v-text="row.change_type == 1 ? '收入' : '支出'" />
                </template>
              </el-table-column>
              <el-table-column
                label="变动金额"
                prop="change_amount"
                align="center"
              />
              <el-table-column
                label="描述"
                prop="change_desc"
                align="center"
                width="140"
              />
              <el-table-column
                label="单据号"
                prop="order_sn"
                align="center"
                width="200"
              />
              <el-table-column
                label="创建时间"
                prop="created_at"
                align="center"
                width="160"
              />
              <el-table-column
                label="修改时间"
                prop="updated_at"
                align="center"
                width="160"
              />
            </el-table>
            <div style="text-align: right; margin-top: 10px">
              <el-pagination
                background
                layout="total, prev, pager, next"
                :total="balanceQuery.total"
                @current-change="getBalanceList"
                :current-page.sync="balanceQuery.page"
                :page-size="balanceQuery.limit"
              >
              </el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>

    <!-- 修改支付宝 -->
    <el-dialog
      title="修改支付宝"
      :visible.sync="XGZFBDialogVisible"
      width="500px"
      center
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <div>
        <el-form
          ref="bindingPhone"
          :rules="bindingPhoneRules"
          label-position="right"
          label-width="100px"
          :model="formLabelAlign"
        >
          <el-form-item label="支付宝账号" prop="alipay_account">
            <el-input v-model="formLabelAlign.alipay_account"></el-input>
          </el-form-item>
          <el-form-item label="支付宝姓名" prop="alipay_name">
            <el-input v-model="formLabelAlign.alipay_name"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <div>{{ userInfo.mobile }}</div>
          </el-form-item>
          <el-form-item prop="code" label="手机验证码">
            <div style="display: flex">
              <el-input
                v-model="formLabelAlign.code"
                placeholder="手机验证码"
              ></el-input>
              <div style="width: 10px"></div>
              <el-button
                @click.prevent="removeDomain('bindingPhone')"
                type="primary"
                plain
                :disabled="disableCode"
              >
                {{ buttonName }}
              </el-button>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即修改</el-button>
            <el-button @click="XGZFBDialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "app",
  props: ["heads"],
  data() {
    return {
      balanceList: [],
      balanceQuery: {
        page: 1,
        limit: 10,
        type: null,
        total: 0,
      },
      isEstimate: 1,
      statusOption: ["已付款", "已失效", "已收货"],
      settlementOption: [
        {
          label: "未结算",
          value: 1,
        },
        {
          label: "已结算",
          value: 2,
        },
      ],
      withdrawalOption: [
        {
          label: "申请中",
          value: 1,
        },
        {
          label: "已通过",
          value: 2,
        },
        {
          label: "已拒绝",
          value: 3,
        },
      ],
      userInfo: {
        nickname: "",
      },
      form: {
        password: "",
        surePass: "",
        code: "",
      },
      loading: false,
      mainFormRules: {
        password: {
          required: true,
          message: "请输入密码",
          trigger: "blur",
        },
        surePass: {
          required: true,
          message: "请输入新密码",
          trigger: "blur",
        },
        code: {
          required: true,
          message: "请输入验证码",
          trigger: "blur",
        },
      },
      editDialogVisible: false,
      formLabelWidth: "120px",
      applyDatil: false,
      limtInfo: {},
      storeInfo: {},
      count: 60,
      flag: true,
      amount: "",
      addCardioag: false,
      cardAdd: {},
      cardType: {},
      radio: "1",

      storeFlage: false,

      drawer: false,

      YQMXDialogVisible: false,
      searchInfoYQMX: {
        page: 1,
        limit: 5,
        created_at: [],
        nickname: "",
        mobile: "",
      },
      YQMXDList: {
        list: [],
        total: 0,
      },
      YQMXDtableLoading: false,

      YQXYHDialogVisible: false,
      textarea: "",

      DDMXDialogVisible: false,
      searchInfoDDMX: {
        page: 1,
        limit: 5,
        pay_at: [],
        settlement_time: [],
        nickname: "",
        mobile: "",
        product_id: "",
        order_date: "",
        product_title: "",
      },
      DDMXList: {
        list: [],
        total: 30,
      },
      summaryList: {
        list: [],
        total: 30,
      },
      orderList: {
        list: [],
        total: 30,
      },
      DDMXtableLoading: false,

      TXDialogVisible: false,
      TXamount: "",
      TXActiveName: "first",
      DDMXActiveName: "estimate",
      TXJLList: {},
      TXJLtableLoading: false,
      searchInfoTXJL: {
        page: 1,
        limit: 5,
      },
      XGZFBDialogVisible: false,
      formLabelAlign: {},
      shareInfo: {},
      withdrawalInfo: {},
      buttonName: "获取验证码",
      countCode: 60,
      disableCode: false,
      bindingPhoneRules: {
        alipay_account: [
          { required: true, message: "支付宝账号不能为空！", trigger: "blur" },
        ],
        alipay_name: [
          { required: true, message: "支付宝姓名不能为空！", trigger: "blur" },
        ],
        code: [
          { required: true, message: "验证码不能为空！", trigger: "blur" },
        ],
      },
    };
  },
  filters: {
    statusFilter(val) {
      let statusOption = ["已付款", "已失效", "已收货"];
      return statusOption[val - 1];
    },
    settlementFilter(val) {
      let settlementOption = [
        {
          label: "未结算",
          value: 1,
        },
        {
          label: "已结算",
          value: 2,
        },
      ];
      return settlementOption.find((item) => item.value === val).label;
    },
    withdrawalFilter(val) {
      let withdrawalOption = [
        {
          label: "申请中",
          value: 1,
        },
        {
          label: "已通过",
          value: 2,
        },
        {
          label: "已拒绝",
          value: 3,
        },
      ];
      return withdrawalOption.find((item) => item.value === val).label;
    },
  },
  methods: {
    removeDomain() {
      this.$api
        .getVerificationCode({
          mobile: this.userInfo.mobile,
        })
        .then((res) => {
          if (res.code == 200) {
            // 开启计时
            const timeout = setInterval(() => {
              if (this.countCode < 1) {
                this.disableCode = false;
                this.buttonName = "获取验证码";
                this.countCode = 60;
                clearInterval(timeout);
              } else {
                this.disableCode = true;
                this.buttonName = this.countCode-- + "s后重发";
              }
            }, 1000);
          } else {
            this.$message.error(res.message);
          }
        });
    },
    emptyYQMX() {
      this.searchInfoYQMX = {
        page: 1,
        limit: 5,
        created_at: [],
        nickname: "",
        mobile: "",
      };
    },
    emptyDDMX() {
      this.searchInfoDDMX = {};
    },
    searchYQMX() {
      this.getLevelUser();
    },

    searchDDMX() {
      if (this.isEstimate == 1) {
        this.getEstOrder();
      } else if (this.isEstimate == 2) {
        this.getDataList();
      } else {
        this.getShareOrder();
      }
    },
    copyLink() {
      //复制链接
      this.$copyText(this.shareInfo.share_url);
    },
    changeNull(row, column, cellValue) {
      if (cellValue) {
        return cellValue;
      } else if (cellValue == 0) {
        return "0";
      } else {
        return "暂无";
      }
    },
    headClass() {
      return "text-align:center;background:#E6E9F0;color: rgb(31, 46, 77);height:56px";
    },
    confirmWithdrawal() {
      if (this.TXamount == 0 || this.TXamount == "") {
        this.$message({
          message: "请输入正确的提现金额",
          type: "warning",
        });
        return;
      }
      this.$api.withdrawalApply({ amount: this.TXamount }).then((res) => {
        if (res.code == 401) {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        } else {
          this.$message({
            message: res.msg,
            type: "success",
          });
        }
        this.TXDialogVisible = false;
      });
    },
    downloadImg(url, fileName) {
      const x = new window.XMLHttpRequest();
      x.open("GET", url, true);
      x.responseType = "blob";
      x.onload = () => {
        const url = window.URL.createObjectURL(x.response);
        const a = document.createElement("a");
        a.href = url;
        a.download = fileName;
        a.click();
      };
      x.send();
    },
    onSubmit() {
      this.$refs.bindingPhone.validate((valid) => {
        if (valid) {
          this.$api
            .withdrawalAccount({
              ...this.formLabelAlign,
              mobile: this.userInfo.mobile,
            })
            .then((res) => {
              if (res.code == 200) {
                this.$message.success(res.msg);
                this.XGZFBDialogVisible = false;
                this.$refs.bindingPhone.resetFields();
                this.getWithdrawal();
              } else {
                this.$message.error(res.msg);
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    TXTabsHandleClick(tab, event) {
      switch (tab.name) {
        case "first":
          this.getWithdrawal();
          break;
        case "second":
          this.withdrawalList();
          break;
        case "third":
          this.getBalanceList();
      }
    },
    DDMXTabsHandleClick(tab, event) {
      if (this.DDMXActiveName == "seeMain") {
        this.isEstimate = 2;
        this.getDataList();
      } else if (this.DDMXActiveName == "estimate") {
        this.isEstimate = 1;
        this.getEstOrder();
      } else {
        this.isEstimate = 0;
        this.getShareOrder();
      }
    },
    toLook() {
      this.drawer = true;
    },
    handleClose(done) {
      this.drawer = false;
    },
    quit() {
      this.$api.lgOut().then(() => {
        sessionStorage.removeItem("token");
        localStorage.removeItem("userInfo");
        this.$router.push("/login");
      });
    },
    tixian() {
      this.applyDatil = true;
      this.$api.byKey({ key: "Store_Withdrawal_Parameter" }).then((res) => {
        res = JSON.parse(this.$decrypt(res.data));
        if (res.state == "success") {
          this.limtInfo = JSON.parse(res.data.settingValue);
          // console.log(this.limtInfo);
        }
      });
    },
    addCard() {
      this.addCardioag = true;
    },

    changeCardBank(e) {
      this.cardType = this.$bankCardAttribution(e);
    },
    code() {
      this.timeDown();
      this.$api
        .captCode({ phone: this.userInfo.phone, type: "register" })
        .then((res) => {
          if (res.state == "success") {
            this.$message({
              message: res.message,
              type: "success",
            });
          }
        });
    },
    code2() {
      // console.log(this.userInfo.phone);
      this.timeDown();
      this.$api
        .captCode({ phone: this.userInfo.phone, type: "register" })
        .then((res) => {
          if (res.state == "success") {
            this.$message({
              message: res.message,
              type: "success",
            });
          }
        });
    },
    // 验证码倒计时
    timeDown() {
      this.count--;
      this.flag = false;
      var timer = setInterval(() => {
        if (this.count > 0) {
          this.count--;
          this.flag = false;
        } else {
          clearInterval(timer);
          timer = null;
          this.count = 60;
          this.flag = true;
        }
      }, 1000);
    },
    sure() {},
    changePassword() {
      this.form = {};
      this.editDialogVisible = true;
    },
    //重置密码
    resetPass() {
      if (this.form.password !== this.form.surePass) {
        this.$message.error("两次密码不一致");
        return false;
      }
      // var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
      // var re = new RegExp(reg);
      // if (!re.test(this.form.password)) {
      //   this.$message.error("请输入有效的登录密码");
      //   return false;
      // }

      let data = {
        password: this.form.password,
        confirm_password: this.form.surePass,
        mobile: this.userInfo.mobile,
        code: this.form.code,
      };
      this.$api.sysResetPass(data).then((res) => {
        if (res.code == "200") {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          // let that = this;
          // setTimeout(function () {
          //   that.quit();
          // }, 1000);
        } else {
          this.$message.error(res.message);
        }
        this.editDialogVisible = false;
      });
    },
    cannelPass() {
      this.editDialogVisible = false;
    },
    getShareInfo() {
      this.$api.getShareInfo().then((res) => {
        this.shareInfo = res.data;
        console.log(this.shareInfo);
      });
    },
    getLevelUser() {
      this.YQMXDtableLoading = true;
      this.YQMXDList.list = [];
      let params = JSON.parse(JSON.stringify(this.searchInfoYQMX));
      if (this.searchInfoYQMX.created_at.length) {
        params.created_at = this.searchInfoYQMX.created_at.join(",");
      } else {
        delete params.created_at;
      }
      this.$api.getLevelUser({ ...params }).then((res) => {
        this.YQMXDList.list = res.data.users;
        this.YQMXDList.total = res.data.total;
        this.YQMXDtableLoading = false;
      });
    },
    handleCurrentChange(val) {
      this.searchInfoYQMX.page = val;
      this.getLevelUser();
    },
    handleDDMXCurrentChange(val) {
      this.searchInfoDDMX.page = val;
      this.getShareOrder();
    },
    handleSummaryurrentChange(val) {
      this.searchDDMX.page = val;
      this.getEstOrder();
    },
    handleCurrentChangeTXJL(val) {
      this.searchInfoTXJL.page = val;
      this.withdrawalList();
    },
    getDataList() {
      this.DDMXtableLoading = true;
      let params = JSON.parse(JSON.stringify(this.searchInfoDDMX));
      if (
        this.searchInfoDDMX.order_date &&
        this.searchInfoDDMX.order_date.length
      ) {
        params.order_date = this.searchInfoDDMX.order_date.join(",");
      }
      this.$api
        .getOrderListFatch({
          ...params,
        })
        .then((res) => {
          this.orderList.total = res.data.total;
          this.orderList.list = res.data.list;
          this.DDMXtableLoading = false;
        });
    },
    getEstOrder() {
      this.DDMXtableLoading = true;
      let params = JSON.parse(JSON.stringify(this.searchInfoDDMX));
      if (
        this.searchInfoDDMX.order_date &&
        this.searchInfoDDMX.order_date.length
      ) {
        params.order_date = this.searchInfoDDMX.order_date.join(",");
      }
      this.$api
        .getOrderSummary({
          ...params,
        })
        .then((res) => {
          this.summaryList.total = res.data.total;
          this.summaryList.list = res.data.list;
          this.DDMXtableLoading = false;
        });
    },
    getShareOrder() {
      let apiName =
        this.DDMXActiveName === "share"
          ? "getShareOrder"
          : "getCommissionOrder";
      this.DDMXtableLoading = true;
      let params = JSON.parse(JSON.stringify(this.searchInfoDDMX));
      if (this.searchInfoDDMX.pay_at && this.searchInfoDDMX.pay_at.length) {
        params.pay_at = this.searchInfoDDMX.pay_at.join(",");
      } else {
        delete params.pay_at;
      }
      if (
        this.searchInfoDDMX.settlement_time &&
        this.searchInfoDDMX.settlement_time.length
      ) {
        params.settlement_time = this.searchInfoDDMX.settlement_time.join(",");
      } else {
        delete params.settlement_time;
      }
      this.$api[`${apiName}`]({ ...params }).then((res) => {
        this.DDMXList.list = res.data.list;
        this.DDMXList.total = res.data.total;
        this.DDMXtableLoading = false;
      });
    },
    getYQMX() {
      this.getLevelUser();
      this.YQMXDialogVisible = true;
    },
    getDDMX() {
      this.getEstOrder();
      this.DDMXDialogVisible = true;
    },
    getWithdrawal() {
      this.$api.getWithdrawal().then((res) => {
        this.withdrawalInfo = res.data;
        this.TXDialogVisible = true;
        this.TXamount = "";
      });
    },
    getApiWithdrawal() {},
    withdrawalList() {
      this.TXJLtableLoading = true;
      this.TXJLList.list = [];
      let params = JSON.parse(JSON.stringify(this.searchInfoTXJL));
      this.$api.withdrawalList({ ...params }).then((res) => {
        this.TXJLList.list = res.data.list;
        this.TXJLList.total = res.data.total;
        this.TXJLtableLoading = false;
      });
    },
    getBalanceList() {
      this.balanceList = [];
      this.balanceQuery.id = this.userInfo.id;
      let params = JSON.parse(JSON.stringify(this.balanceQuery));
      this.$api.getBalanceFacth({ ...params }).then((res) => {
        this.balanceList = res.data.list;
        this.balanceQuery.total = res.data.total;
      });
    },
  },
  mounted() {
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    this.getShareInfo();
    this.getLevelUser();
    this.getShareOrder();
  },
};
</script>
<style scoped lang="less">
.get-code-btn {
  margin-left: 20px;
}
.headerContent {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #82868f;
  letter-spacing: 0;
}
.hand-cursor {
  cursor: pointer;
}
.sasdfa {
  color: cyan;
}
.itemLabel {
  width: 200px;
  text-align: center;
  margin-right: 50px;
}
/deep/.el-input__inner {
  color: black !important;
}
/deep/.el-textarea__inner {
  color: black !important;
}
/deep/.el-dialog {
  border-radius: 20px;
}
.goodsItem {
  display: flex;
  align-items: center;
  img {
    width: 80px;
    height: 80px;
  }
  .goodsInfo {
    height: 80px;
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: baseline;
    div {
      text-align: left;
      width: 250px;
      white-space: nowrap; // 强制一行显示
      overflow: hidden; // 超出隐藏
      text-overflow: ellipsis; // 省略号
    }
  }
}
/* 滚动条样式 */
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
/* 滑块样式 */
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #dbddde;
  border-radius: 10px;
}
/* 滚动条轨道样式 */
/deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  border-radius: 10px;
}

.rulesBox {
  border: 2px solid #ccc;
  border-radius: 10px;
}
.boldFont {
  font-weight: bold;
  div {
    border-radius: 5px;
  }
}
</style>
